<template>
    <div class="detailHeader">
        <el-collapse v-model="activeNames">
            <el-collapse-item title="回款记录" name="1">
                <BaseTable :data="collectionTableData" :columns="collectionTableColumn" :tableHeight="tableHeight"
                    @details="handlerClick" :pagination="false">
                </BaseTable>
            </el-collapse-item>
            <el-collapse-item name="2">
                <template slot="title">
                    <div>账单信息</div>
                    <div style="margin-left: 80%;" @click.stop="linkClick"><el-link type="primary">自动销账</el-link></div>
                </template>
                <BaseTable :data="tableData" :columns="tableColumn" :pagination="false" :tableHeight="tableHeight">
                </BaseTable>
            </el-collapse-item>
        </el-collapse>
        <div class="demo-drawer__footer">
            <el-button size="small" @click="drawerInner">取 消</el-button>
            <el-button type="primary" @click="addSave" size="small" :loading="loading">
                {{ loading ? "提交中 ..." : "保 存" }}
            </el-button>
        </div>
    </div>
</template>

<script>
import BaseTableCheck from '@/components/BaseTable/baseTablecheck'
import BaseTable from '@/components/BaseTable'
import dfilters from '@/libs/Utils.js'
import api from '@/api/Business/statement'
export default {
    name: 'detail',
    components: { BaseTable, BaseTableCheck },
    data() {
        var that = this
        return {
            tableHeight: window.innerHeight - 500,
            activeNames: ['1', '2'],
            collectionTableData: [], // form表单table数据
            collectionTableColumn: [
                { prop: 'bankSerialNo', label: '流水号' },
                { prop: 'collectionDate', label: '回款时间' },
                { prop: 'amount', label: '回款金额' },
                { prop: 'ysy', label: '已使用' },
                { prop: 'syje', label: '剩余金额' }
            ],
            tableData: [],
            tableColumn: [
                { prop: 'statementNo', label: '账单号' },
                // { prop: 'portCode', label: '费目' },
                { prop: 'totalAmount', label: '账单金额' },
                { prop: 'yxz', label: '已销账金额' },
                { prop: 'qk', label: '未销账金额' },
                {
                    label: '本次销账金额',
                    fixed: 'right',
                    align: 'center',
                    render(h, params) {
                        return h('el-input', {
                            props: {
                                value: params.row.amount,
                                type: 'primary',
                                size: 'mini'
                            },
                            on: {
                                "input": (val) => {
                                    that.tableData[params.row.index].amount = val
                                    that.dataList[params.row.index].amount = val
                                    // that.$set(params.row, "amount", ("" + val))
                                },
                            },
                        })

                    }
                }
            ],
            isShow: false, // 是否显示票货弹窗
            prefixCodeList: [], // 前缀
            valid: '', // 校验值
            loading: false, // 下拉框加载状态
            prefixCode: '', // 前缀
            isChooseDes: '', //
            processName: '',
            dataList: [],
            syje: '',
            idVal: ''
        }
    },
    computed: {
    },
    mounted() {
    },
    methods: {
        // 主页面传递数据
        updateData(val, msg) {
            this.collectionTableData = []
            this.tableData = []
            this.dataList = []
            if (val.length != 0) {
                this.collectionTableData = val
                this.collectionTableData.map(item => {
                    item.collectionDate = dfilters.getProcessingDate(item.collectionDate, '0')
                })
            } else {
                this.collectionTableData = []
            }
            if (msg.length > 0) {
                this.tableData = msg
                this.tableData.map(item => {
                    const data = {
                        statementId: item.id,
                        collectionId: '',
                        amount: '',
                        paymentType: '',
                    }
                    this.dataList.push(data)
                })
            } else {
                this.tableData = []
            }
        },
        //选择一条数据
        handlerClick(val) {
            this.idVal = ''
            this.syje = ''
            // 回款时间
            var date = new Date(val.collectionDate).getTime()
            this.tableData.forEach((item, index) => {
                // 账单日期
                var date0 = new Date(item.settlementDate).getTime()
                // 账期
                var date1 = new Date(item.paymentDate).getTime()
                if (date0 >= date) {
                    this.dataList[index].paymentType = '1'
                } else if (date >= date1) {
                    this.dataList[index].paymentType = '3'
                } else {
                    this.dataList[index].paymentType = '2'
                }
                this.dataList[index].collectionId = val.id
            })
            this.idVal = val.id
            this.syje = val.syje
        },
        // 自动销账按钮
        linkClick() {
            if (!this.idVal) {
                return this.$message.warning('请选择一条回款记录')
            }
            let num = 0
            this.tableData.map(data => {
                num = num + data.qk
            })
            this.$nextTick(() => {
                if (this.syje >= num) {
                    this.tableData.map((data, index) => {
                        data.amount = data.qk
                        this.dataList[index].amount = data.qk
                    })
                } else {
                    let number = this.syje
                    this.tableData.map((data, index) => {

                        if (number >= this.tableData[index].qk) {
                            data.amount = data.qk
                            this.dataList[index].amount = data.qk
                            number = number - data.amount

                        } else if (number <= this.tableData[index].qk) {
                            data.amount = number
                            this.dataList[index].amount = number
                            number = number - this.dataList[index].amount
                        } else {
                            if (number >= 0) {
                                data.amount = number
                                this.dataList[index].amount = number
                                number = number - data.amount
                            } else {
                                data.amount = 0
                                this.dataList[index].amount = 0
                            }

                        }
                    })
                }
            })
        },
        // 取消按钮
        drawerInner() {
            this.dataList = []
            this.$emit('drawerInner')
        },
        // 保存
        async addSave() {
            // this.tableData.forEach((item,i)=>{
            //     this.tableData[i].amount = this.dataList[i].amount
            // })
            const data = this.dataList
            if (data.length > 0) {
                if (!data[0].collectionId) {
                    return this.$message.warning('请先选择需要销账的回款')
                } else {
                    let msg = data.filter(item => item.amount !== '')
                    if (msg.length > 0) {
                        let num = 0
                        for (let i = 0; i < msg.length; i++) {
                            num = num + msg[i].amount
                            if (msg[i].amount > this.tableData[i].qk) {
                                return this.$message.warning('销账金额不能大于未销账金额')
                            }
                        }
                        if (num > this.syje) {
                            return this.$message.warning('剩余金额不足')
                        }
                        await api.dataListInsert(msg).then(res => {
                            if (res.status == '200') {
                                this.drawerInner()
                                this.$message.success(res.data.msg)
                                this.dataList = []
                            }
                        })
                    } else {
                        return this.$message.warning('请输入本次销账')
                    }

                }
            }

        },
        /**
             * @Author: gonghairun
             * @description: 关闭弹窗显示
             * @param {*} done
             * @return {*}
             */
        handleClose(done) {
            // this.$confirm('确认关闭？').then(_ => {
            done()
            // })
            // .catch(_ => {});
        },
    }
}
</script>

<style lang="less" scoped>
/deep/.el-collapse-item__header {
    margin-left: 10px;
}

// @import "../component/index.less";
// .el-collapse-item__wrap{
//     height: 100%;
// }
// /deep/.el-collapse-item__wrap {
//     border-bottom: none !important;
// }
// /deep/.el-table--border{
//     border: none !important;
// }
// /deep/ .base-table{
//     border: none !important;
// }
</style>
